<template>
    <div class="common-card" :class="themeType">
        <public-title title="长庆油田大病人数" :themeType="themeType" />
        <div class="inner" ref="healthChart"></div>
    </div>
</template>
<script setup lang="ts">
    import { ref, unref, onMounted } from 'vue';
    import * as echarts from 'echarts';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { getHealthDataList } from '/@/components/body-d-right/right.api';
    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const props = defineProps({
        setting: Object,
    });
    const { themeType } = useTheme();
    const { setSession, getSession } = useSession();
    const { RIGHT_KEY2 } = caching;
    const { setSpin, spinning } = useSpin();
    const healthChart = ref<HTMLElement>();
    onMounted(() => {
        init();
    });
    const { healthData, getValue, setHealth } = useHealth();

    async function init() {
        try {
            const { code, result } = await getHealthDataList({ dataType: props.setting?.dataType, orgCode: props.setting?.orgCode });
            setSpin(true);
            if (code != 200) {
                return;
            }
            setSession(RIGHT_KEY2, JSON.stringify(result));
            setValue(result);
        } catch {
            const result = JSON.parse(getSession(RIGHT_KEY2));
            setValue(result);
        }
    }

    function setValue(result) {
        setHealth(result);
        const yData = unref(getValue);
        let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
        initChart(unref(healthData), total);
    }

    function initChart(chartData, total) {
        let myChart = echarts.init(healthChart.value);
        let options = ringOption(chartData, total, unref(themeType));
        myChart.setOption(options);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
</script>
<style scoped lang="less">
    .inner {
        width: 90%;
        margin: 0 auto;
        height: calc(100% - 40px);
    }
</style>
